<template>
  <el-row>
    <el-col :span="4">
      <el-timeline>
        <el-timeline-item
            v-for="(instance, index) in instantiation"
            :key="index"
            :timestamp="instance.uri"
            placement="top"
        >
          <el-card>

            <el-tag v-if="instance.state" class="ml-2" type="success">健康实例</el-tag>
            <el-tag v-if="!instance.state" class="ml-2" type="danger">故障实例</el-tag>
            <el-link v-if="instance.state" :href="'http://'+instance.uri" type="info"> >前往 </el-link>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-col>
    <el-col :span="2"/>
    <el-col :span="18">
      <RabbitMqQueueInfo :queueInfo="qInfo"/>
    </el-col>
  </el-row>

</template>

<script>
import RabbitMqQueueInfo from "../../components/DataShow/RabbitMqQueueInfo.vue";

export default {
  name: "RabbitMqMonitor",
  components:{
    RabbitMqQueueInfo
  },
  data(){
    return{
      instantiation:[{uri:"127.0.0.1:15672",state:true}
        ,{uri:"127.0.0.1:5672",state:true}
        ,{uri:"115.149.98.43:15672",state:false}]
      ,qInfo: [
            {
                name: 'nodeA',
                value: 10,
                children: [
                  {
                    name: 'nodeAa',
                    value: 4
                  },
                  {
                    name: 'nodeAb',
                    value: 6
                  }
                ]
              },
              {
                name: 'nodeB',
                value: 20,
                children: [
                  {
                    name: 'nodeBa',
                    value: 20,
                    children: [
                      {
                        name: 'nodeBa1',
                        value: 20
                      }
                    ]
                  }
                ]
              }
          ]
    }
  }
}
</script>

<style scoped>

</style>